<template>
  <div class="profile">
    <div class="profile-wrapper center-wrapper">
      <div class="profile-left">
        <e-upload
          :wrapper-style="{ 'border-radius': '50%', overflow: 'hidden' }"
          @file-upload="handleFileUpload"
        >
          <img class="profile-avatar" :src="infoShowCpt.avatar" v-if="infoShowCpt.avatar" />
          <img class="profile-avatar" src="@/assets/img/default/default_avatar.png" v-else />
        </e-upload>

        <template v-if="profileStore.isEdit">
          <div class="profile-user">
            <div class="user-name">
              <div class="nametitle">用户名</div>
              <el-input class="ipt" v-model="editData.nickname" placeholder="用户昵称" />
            </div>

            <div class="user-email">
              <el-icon class="icon"><Message /></el-icon>
              <el-input class="ipt" v-model="editData.mail" placeholder="邮箱" />
            </div>

            <div class="user-city">
              <el-icon class="icon"><Location /></el-icon>
              <el-input class="ipt" v-model="editData.address" placeholder="城市" />
            </div>
          </div>

          <div class="profile-account">
            <div class="nametitle">社交账号</div>

            <div class="account-url">
              <el-icon class="icon"><Link /></el-icon>
              <el-input class="ipt" v-model="editData.url_one" placeholder="https://github.com/" />
            </div>

            <div class="account-url">
              <el-icon class="icon"><Link /></el-icon>
              <el-input class="ipt" v-model="editData.url_two" placeholder="https://twitter.com/" />
            </div>
          </div>

          <!-- 修改密码逻辑已更改
          <div class="profile-password">
            <div class="nametitle">密码</div>

            <div class="password-box">
              <template v-if="profileStore.isEditPassword">
                <el-input class="ipt" placeholder="输入新密码" />
                <span class="tip">8位数以上数字和字母</span>
                <el-input class="ipt" placeholder="再次确认密码" />
              </template>
              <template v-else>
                <div class="password-show">
                  <span>******</span>
                  <span class="password-show-btn" @click="handleToggleEditPasswordStatus"
                    >编辑</span
                  >
                </div>
              </template>
            </div>
          </div> -->

          <div class="action">
            <button class="hover-half" @click="handleEditSave">保存</button>
            <button class="hover-half" @click="handleEditCancel">取消</button>
          </div>
        </template>
        <template v-else>
          <div class="profile-user">
            <div class="user-name">
              <div class="username">{{ infoShowCpt.nickname }}</div>
              <div class="edit-btn hover-half" v-if="!isOthers" @click="handleToggleEditStatus">
                编辑资料
              </div>
            </div>
          </div>

          <div class="profile-details">
            <div class="details-item" v-show="infoShowCpt.mail">
              <el-icon class="icon"><Message /></el-icon>
              <span>{{ infoShowCpt.mail }}</span>
            </div>

            <div class="details-item" v-show="infoShowCpt.address">
              <el-icon class="icon"><Location /></el-icon>
              <span>{{ infoShowCpt.address }}</span>
            </div>

            <div class="details-item" v-show="infoShowCpt.url_one">
              <el-icon class="icon"><Link /></el-icon>
              <span>{{ infoShowCpt.url_one }}</span>
            </div>

            <div class="details-item" v-show="infoShowCpt.url_two">
              <el-icon class="icon"><Link /></el-icon>
              <span>{{ infoShowCpt.url_two }}</span>
            </div>
          </div>
        </template>
      </div>

      <div class="profile-right">
        <template v-if="profileStore.isEditArticle">
          <profile-editor />
        </template>
        <template v-else>
          <div class="profile-article-box">
            <profile-article />
          </div>

          <div class="profile-model-box">
            <profile-model />
          </div>
        </template>
      </div>
    </div>
  </div>

  <cropper ref="cropperRef" @finish-crop="handleFinishCrop" :img="cropImgTemp"></cropper>

  <!-- 修改密码逻辑已更改
  <my-dialog ref="dialogRef" :dialog-class="'profileCodeDialog'">
    <template #default>
      <div class="dialog-main">
        <div class="main-title">身份验证</div>

        <div class="main-subtitle">请验证身份后，再进行下一步操作</div>

        <div class="main-tip">
          使用手机号 <span class="phone-font">{{ phoneCpt }}</span> 验证
        </div>

        <div class="main-code">
          <el-input
            class="ipt"
            type="text"
            v-model="dialogCode"
            autocomplete="off"
            placeholder="输入短信验证码"
            maxlength="6"
          >
            <template #suffix>
              <button class="suffix" @click.stop="handleCodeBtnClick">
                {{ codeBtnShow }}
              </button>
            </template>
          </el-input>
        </div>

        <div class="main-action hover-half" @click="handleConfirm">验证</div>
      </div>
    </template>
  </my-dialog> -->
</template>

<script lang="ts" setup>
import Cropper from '@/components/cropper/Cropper.vue'
import EUpload from '@/components/upload/EUpload.vue'
import ProfileEditor from './cpns/ProfileEditor.vue'
import ProfileArticle from './cpns/ProfileArticle.vue'
import ProfileModel from './cpns/ProfileModel.vue'
import useProfileStore from '@/stores/profile/profile'
import { ElMessage } from 'element-plus'
import { ref, computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { cloneDeep } from 'lodash'
import { useRoute } from 'vue-router'

// ====== store/route
const route = useRoute()
const profileStore = useProfileStore()
const { userInfo, othersInfo, isProfileChange } = storeToRefs(profileStore)

// ====== data
const cropperRef = ref<any>(null)
const cropImgTemp = ref<string>('')
const isOthers = ref(false)
const editData = ref<any>(cloneDeep(userInfo.value))

// ====== computed
const infoShowCpt = computed(() => (isOthers.value ? othersInfo.value : userInfo.value))

// ====== watch
watch(isProfileChange, () => {
  setupInit()
})

// ====== methods
const handleToggleEditStatus = () => {
  profileStore.isEdit = true
}

const handleEditSave = () => {
  if (!editData.value.nickname) {
    ElMessage.warning('用户名不能为空')
    return
  }

  profileStore.cpInfoAction({
    nickname: editData.value.nickname,
    mail: editData.value.mail,
    address: editData.value.address,
    url_one: editData.value.url_one,
    url_two: editData.value.url_two
  })

  profileStore.isEditPassword = false
  profileStore.isEdit = false
}
const handleEditCancel = () => {
  editData.value = cloneDeep(infoShowCpt.value)

  profileStore.isEditPassword = false
  profileStore.isEdit = false
}
const handleFileUpload = (file: File) => {
  if (file.type == 'image/gif') {
    handleFinishCrop(file)
  } else {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      cropImgTemp.value = reader.result as string
      cropperRef.value?.showCropper()
    }
  }
}
const handleFinishCrop = (cropFile: File) => {
  const fd = new FormData()
  fd.append('image', cropFile)

  profileStore.uploadAvatarAction(fd)
  cropperRef.value?.hiddenCropper()
}

// ====== tool
function setupInit() {
  if (route.query.userId) {
    // 查看别人
    isOthers.value = true
    profileStore.selectOtherInfoAction({
      id: String(route.query.userId)
    })
  } else {
    // 查看自己
    isOthers.value = false
    profileStore.selectInfoAction({}, () => {
      editData.value = cloneDeep(userInfo.value)
    })
  }
}

// ====== lifecycle
setupInit()
</script>

<style lang="less" scoped>
.profile {
  margin-bottom: 100px;

  :deep(.ipt) {
    width: 100%;
    height: 40px;
    background: #ffffff;
    border-radius: 7px;
    font-size: 17px;
    font-weight: 500;

    input {
      color: #000000;
    }

    input::input-placeholder {
      font-size: 17px;
      color: #999999;
      font-weight: 500;
    }
    input::-webkit-input-placeholder {
      font-size: 17px;
      color: #999999;
      font-weight: 500;
    }
    input::-moz-placeholder {
      font-size: 17px;
      color: #999999;
      font-weight: 500;
    }
    input:-moz-placeholder {
      font-size: 17px;
      color: #999999;
      font-weight: 500;
    }
    input::-ms-input-placeholder {
      font-size: 17px;
      color: #999999;
      font-weight: 500;
    }
  }

  .profile-wrapper {
    display: flex;
    padding-top: 53px;

    .profile-left {
      flex: 1;

      .profile-avatar {
        width: 143px;
        height: 143px;
        background: #c1c8d0;
        border-radius: 50%;
      }

      .profile-details {
        .nametitle {
          font-size: 15px;
          margin-top: 26px;
          font-weight: bold;
        }

        .details-item {
          display: flex;
          align-items: center;
          margin-top: 30px;

          .icon {
            margin-right: 13px;
            font-size: 23px;
          }
        }
      }

      .profile-user,
      .profile-account {
        margin-top: 40px;

        .nametitle {
          font-size: 20px;
          font-weight: bold;
        }

        .user-name {
          .username {
            font-size: 32px;
            font-weight: bold;
          }

          .ipt {
            width: 271px;
            margin-top: 13px;
          }

          .edit-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 270px;
            height: 42px;
            background: #ffffff;
            border-radius: 7px;
            font-size: 18px;
            font-weight: 500;
            margin-top: 27px;
          }
        }

        .user-email,
        .user-city,
        .account-url {
          display: flex;
          align-items: center;
          margin-top: 27px;

          .icon {
            font-size: 25px;
            margin-right: 16px;
          }
        }
      }
      .profile-account {
        margin-top: 35px;
      }

      .profile-password {
        margin-top: 37px;

        .nametitle {
          font-size: 20px;
          font-weight: bold;
        }

        .password-box {
          margin-top: 19px;

          .tip {
            display: flex;
            justify-content: flex-end;
            font-size: 15px;
            font-weight: 500;
            color: #999999;
            margin: 5px 0 13px 0;
          }

          .password-show {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 40px;
            border-radius: 7px;
            background-color: #ffffff;
            padding-left: 13px;
            padding-right: 13px;
            font-size: 13px;
            font-weight: 500;
            color: #666666;
            line-height: 1.2;
            border: 1px solid #dcdfe6;
            margin-top: 19px;

            .password-show-btn {
              font-size: 17px;
              font-weight: 500;
              color: #0075ff;
              cursor: pointer;
            }
          }
        }
      }

      .action {
        margin-top: 40px;

        button {
          background: none;
          border: none;
          width: 108px;
          height: 40px;
          border-radius: 7px;
          font-size: 17px;
          font-weight: 500;
          transition: all 0.3s ease;
        }
        button:first-of-type {
          background: #0075ff;
          color: #ffffff;
        }
        button:last-of-type {
          background: #ffffff;
          border: 1px solid #d2d2d2;
          color: #999999;
          margin-left: 40px;
        }
        button:hover {
          box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        }
      }
    }

    .profile-right {
      width: 1270px;
      min-height: 911px;
      background: #ffffff;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
      border-radius: 7px;
      box-sizing: border-box;
      padding: 55px 55px 0 55px;

      .profile-model-box {
        margin-top: 50px;
      }
    }
  }
}

.profileCodeDialog {
  :global(.profileCodeDialog-container) {
    width: 533px;
    height: 560px;
  }

  .dialog-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 40px;

    .main-title {
      font-size: 37px;
      margin-top: 63px;
    }

    .main-subtitle {
      font-size: 17px;
      color: #666666;
      margin-top: 20px;
    }

    .main-tip {
      font-size: 17px;
      line-height: 28px;
      align-self: flex-start;
      margin-top: 35px;

      .phone-font {
        text-decoration: underline;
      }
    }

    .main-code {
      margin-top: 24px;
      width: 100%;

      :deep(.ipt) {
        width: 100%;
        height: 59px;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 400;

        input::input-placeholder {
          font-size: 17px;
          color: #bebebf;
        }
        input::-webkit-input-placeholder {
          font-size: 17px;
          color: #bebebf;
        }
        input::-moz-placeholder {
          font-size: 17px;
          color: #bebebf;
        }
        input:-moz-placeholder {
          font-size: 17px;
          color: #bebebf;
        }
        input::-ms-input-placeholder {
          font-size: 17px;
          color: #bebebf;
        }
      }

      .suffix {
        display: flex;
        justify-content: center;
        align-items: center;
        border: none;
        background: none;
        font-size: 17px;
        font-weight: 400;
        color: #0075ff;
        cursor: pointer;
      }
    }

    .main-action {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 264px;
      height: 45px;
      background: #0075ff;
      box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
      border-radius: 7px;
      font-size: 17px;
      color: #ffffff;
      margin-top: 87px;
    }
  }
}
</style>
